@import url('https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css');
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /*   scroll-snap-type: y mandatory; */
}


body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: #3f497f;
  timeline-scope: --home-vt, --lab-vt, --reverse-vt ,  --R_D-vt  , --gallery-vt , --aboutUs-vt  ; 
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  /* background: #2a2a2a; */
  overflow-x: hidden;
  background-color: #e5e9f4;
}

section {
  min-height: 80vh;
  width: 100vw;
  display: grid;
  place-items: center;
  /*   scroll-snap-align: center; */
}



nav ul {
  display: flex;
  list-style-type: none;
  gap: 0rem;
  padding: 0;
  margin: 0;
}



[href] {
  font-weight: bold;
  color: hsl(0, 100%, 51%);
  text-decoration-line: none;
  padding: 0mm; /* فاصله 3 میلیمتر در تمام جهات (بالا، پایین، چپ و راست) */
  display: inline-block; /* برای گسترش ناحیه کلیک‌پذیر در اطراف لینک */
  animation: change linear both;
  opacity: calc(0.9 + var(--active, 0));
  transition: opacity 0.2s, background 0.2s;
  border-radius: 5rem;
}
@keyframes change {
  50% {
    --active: 1
  }
}
[href]:hover {
  background-color: rgba(247, 0, 0, 0.1); /* تغییر رنگ پس‌زمینه هنگام هاور (مثال) */
  padding: 5mm;
}
.newUl{
  z-index: 1400;
}

.newUl [href] {
  color: #3f497f;
  font-size: 22px;
}


[href]:is(:hover, :focus-visible) {
  --hover: 1;
  background: white;
  border-radius: 40px;
  padding: 10px;
}


[href] span {
  display: inline-block;
  transition: scale 0.2s;
  scale: calc(1 + (var(--hover, 0) * 0.1));
}

[href="#home"] {
  anchor-name: --home;
  animation-timeline: --home-vt;
}

[href="#lab"] {
  anchor-name: --lab;
  animation-timeline: --lab-vt;
}
[href="#reverse"] {
  anchor-name: --reverse;
  animation-timeline: --reverse-vt;
}
[href="#R_D"] {
  anchor-name: --R_D;
  animation-timeline: --R_D-vt;
}
[href="#gallery"] {
  anchor-name: --gallery;
  animation-timeline: --gallery-vt;
}
[href="#aboutUs"] {
  anchor-name: --aboutUs;
  animation-timeline: --aboutUs-vt;
}



#home {
  color: #ffffff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; /* این تنظیم می‌کند که تصویر در مرکز قرار گیرد */
  view-timeline-name: --home-vt;
  width: 100vw; /* عرض کامل صفحه */
  height: 100vh; /* ارتفاع کامل صفحه */

}
#lab {
  view-timeline-name: --lab-vt;
  flex-grow: 1;
  color: white;
  align-content: center;
  font-size: 1.5rem;
  z-index: 200;
}

#reverse {
  view-timeline-name: --reverse-vt;
  flex-grow: 1;
  color: white;
  align-content: center;
  font-size: 1.5rem;
}
#R_D {
  view-timeline-name: --R_D-vt;
  flex-grow: 1;
  color: white;
  align-content: center;
  font-size: 1.5rem;
}
#gallery {
  view-timeline-name: --gallery-vt;
  flex-grow: 1;
  color: white;
  align-content: center;
  font-size: 1.5rem;
  z-index: 400;
}
#aboutUs {
  view-timeline-name: --aboutUs-vt;
  flex-grow: 1;
  color: white;
  align-content: center;
  font-size: 1.5rem;
}

.myContact {
  width: 100vw;
  background-color: #3f497f;
  color: #f7c04a;
  z-index: 1900;
}

#Dworkshop{
  z-index: 300;
}

#lab h2 {
  padding-bottom: 20px;
}

#reverse h2 {
  padding-bottom: 20px;
}
#R_D h2 {
  padding-bottom: 20px;
}
#gallery h2 {
  padding-bottom: 20px;
}
#aboutUs h2 {
  padding-bottom: 20px;
}

h1 {
  display: grid;
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

:is(h1, h2) {
  font-size: clamp(2.5rem, 7vw + 1rem, 10rem);
  text-align: center;
  line-height: 1;
  margin: 0;
  width: 100%;
}

h1 span:first-of-type {
  display: inline-block;
  color: #c9c7c7;
  font-size: 0.35em;
}

h1 span:last-of-type {
  display: inline-block;
  color: #f7c04a;
}

h1 span:first-of-type {
  display: inline-block;
  animation: fade-away both linear;
  animation-timeline: --home-vt;
  animation-range: entry-crossing 50% exit 50%;
}

h1 span:last-of-type {
  display: inline-block;
  animation: scale-up both cubic-bezier(.1, .7, .9, 1.3), fade-away both linear;
  animation-timeline: --home-vt;
  animation-range: entry-crossing 60% exit 70%, exit 10% exit 50%;
}

@keyframes scale-up {
  to {
    scale: 1.5;
  }
}

@keyframes grow {
  0% {
    scale: 0.5;
    opacity: 0;
  }
}

@keyframes fade-away {
  100% {
    opacity: 0;
  }
}

form {
  text-align: left;

}

form p:first-of-type {
  font-size: 20px;
}



form div {
  display: flex;
}

form input {
  width: 300px;
  flex: 1;
  padding: 1rem;
  border-radius: 0 5rem  5rem 0;
  font-size:  20px;

}

form button {
  border-width: 2px;
  border-radius:13px;
  padding: 1rem;
  width: 100%;
  border-color: #f7c04a;
  background-color: white;
  color: #3f497f;
  font-size: 25px;
}
form button:hover {
  background-color: #f7c04a;  
}
li a:hover {
  color: rgb(172, 165, 165) !important;
}
.card {  
  background-color: rgba(255, 255, 255, 0.6);
  /* Adjust the alpha value (0.7) to control transparency */
  border-radius: 20px;
  overflow: hidden;
}

.card a {
  color: #f7c04a;
  background-color: #3f497f;
  border: 10px;
}

button.neumorphic {
  container-type: inline-size;
  aspect-ratio: 1/1;
  border: 1.5rem solid transparent;
  border-radius: 1rem;
  color: hsl(0 0% 10%);
  background: none;

  display: grid;
  place-content: center;
  gap: 1rem;

  --shadow:
    -.5rem -.5rem 1rem hsl(0 0% 100% / .75),
    .5rem .5rem 1rem hsl(0 0% 50% / .5);
  box-shadow: var(--shadow);
  outline: none;
  transition: all 0.1s;

  .imgC{
    width: 50px;
    height: 50px;
    top: 20%;
    left: 50%;
  }
  &:hover,
  &:focus-visible {
    color: #f7c04a;
    scale: 1.1
  }

  &:active,
  &.active {
    box-shadow:
      var(--shadow),
      inset .5rem .5rem 1rem hsl(0 0% 50% / .5),
      inset -.5rem -.5rem 1rem hsl(0 0% 100% / .75);
    color: #f7c04a;

    >i {
      font-size: 28cqi
    }

    ;

    >span {
      font-size: 13cqi
    }

    ;
  }

  >i {
    font-size: 31cqi;
  }
}
.buttons {
  display: grid;
  width: min(75rem, 100%);
  margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 2rem;
}

.container {
  padding: 5px 0;
  margin: 0 auto;
  max-width: 80vw;

}

.R_D_h1,
.galleryh1 {
  position: relative;
  /* margin-bottom: 5px; */
  font-family: 'Oswald', sans-serif;
  font-size: 44px;
  text-transform: uppercase;
  color: #3f497f;
}

.galleryh3 {
  text-align: right;
  position: relative;
  margin-top: 17px;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  color: red;
}

.galleryh3 a {
  color: #3f497f;
}

.gallery-wrap {
  display: flex;

  flex-direction: row;
  width: 100%;
  height: 60vh;

}

.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat:no-repeat;
  transition: flex 0.8s ease;
  border-radius: 30px;
  margin: 3px;
  --shadow:
  -.5rem -.5rem 1rem hsl(0 0% 100% / .75),
  .5rem .5rem 1rem hsla(0, 0%, 13%, 0.696);
box-shadow: var(--shadow);
outline: none;
transition: all 0.1s;

  &:hover {
    flex: 17;
  }
}



.hover-text2 {
  position: absolute;
  margin-top: 320px;
  margin-left: -40px;
  transform: translate(30%, -90%);
  color: #ffffff;
  display: none;
  font-size: 25px;
  background: hsla(0, 0%, 39%, 0.25);
  border-radius: 50px;
  padding: 0px 35px;
  backdrop-filter: blur(10px);
}

.item:hover .hover-text2 {
  display: block;
}

.hover-text {
    position: absolute;
    /* تعیین موقعیت مطلق برای متن */
    top: -13%;
    /* قرار گرفتن در وسط افقی */
    transform: translate(30%, 670%);
    /* حرکت به سمت راست */
    color: #3f497f;
    display: none;
    /* عدم نمایش اولیه */
    font-size: 35px;
}

.containercss3:hover .hover-text {
    display: block;
    /* نمایش متن هنگامی که بر روی تصویر هاور می‌شود */    
}

        /* تنظیمات برای sticky منو */
        .sticky-menu {
          position: -webkit-sticky; /* برای سازگاری بیشتر */
          position: sticky;
          top: 0;
          z-index: 100;
      }
      .content {
          margin-left: 220px; /* فاصله برای منو */
      }

/* ----------------------------- */
.u-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background-clip: padding-box;
  border-color: #e5e9f4;
  border-width: 1px;
  border-radius: 13px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  background-color: transparent;
  color: inherit;
  height: auto;
}

@media (max-width: 1000px) {

 

}